<template>
  <view
    v-if="getShow"
    class="pa-16 default-color mb-12"
    :style="{ backgroundColor: getStatusUI.backgroundColor, color: getStatusUI.color }"
  >
    <view class="fz-24 mb-8 font-bold">
      <text>{{ getStatusUI.text }}</text>
    </view>
    <view v-if="getStatusUI.des" class="fz-12">
      <text>{{ getStatusUI.des }}</text>
    </view>
    <view v-if="reviewStatus === ReviewStatus.Rejected && reviewContent" class="fz-12 disFlx">
      <text class="flex-shrink-0">驳回原因：</text>
      <text>
        {{ reviewContent }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ReviewStatus } from '@/enums/businessOpportunitiesEnum';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';

  const props = defineProps({
    reviewStatus: Number as PropType<ReviewStatus>,
    reviewContent: propTypes.string,
  });

  const getShow = computed(
    () =>
      props.reviewStatus === ReviewStatus.Rejected || props.reviewStatus === ReviewStatus.Expired,
  );

  const getStatusUI = computed(() => {
    const obj = {
      backgroundColor: '',
      color: '',
      text: '',
      des: '',
    };
    switch (props.reviewStatus) {
      case ReviewStatus.Rejected:
        obj.backgroundColor = '#EA5E0E';
        obj.color = '#fff';
        obj.text = '已驳回';
        break;
      case ReviewStatus.Expired:
        obj.backgroundColor = '#F2F3F5';
        obj.color = '#333';
        obj.text = '已失效';
        obj.des = '本供需信息已超出合作期限，已自动失效。';
        break;
    }

    return obj;
  });
</script>

<style scoped></style>
